<template>
  <div class="shopping-cart">
    <!-- 购物车头部 -->
    <div class="cart-header">
      <div class="header-content">
        <div class="title-container">
          <i class="el-icon-shopping-cart-full"></i>
          <h1>我的购物车</h1>
        </div>
        <p class="header-tip">温馨提示：产品是否购买成功，以最终下单为准哦，请尽快结算</p>
      </div>
    </div>
    <!-- 购物车头部END -->

    <!-- 购物车主要内容区 -->
    <div class="cart-content" v-if="getShoppingCart.length>0">
      <!-- 购物车表格 -->
      <div class="cart-table">
        <div class="table-header">
          <div class="cell check-cell">
            <el-checkbox v-model="isAllCheck">全选</el-checkbox>
          </div>
          <div class="cell img-cell">商品</div>
          <div class="cell name-cell">商品名称</div>
          <div class="cell price-cell">单价</div>
          <div class="cell num-cell">数量</div>
          <div class="cell total-cell">小计</div>
          <div class="cell action-cell">操作</div>
        </div>

        <!-- 购物车商品列表 -->
        <div class="product-item" v-for="(item,index) in getShoppingCart" :key="item.id">
          <div class="cell check-cell">
            <el-checkbox :value="item.check" @change="checkChange($event,index)"></el-checkbox>
          </div>
          <div class="cell img-cell">
            <router-link :to="{ path: '/goods/details', query: {productID:item.productID} }">
              <img :src="$target + item.productImg" />
            </router-link>
          </div>
          <div class="cell name-cell">
            <router-link :to="{ path: '/goods/details', query: {productID:item.productID} }">
              {{item.productName}}
            </router-link>
          </div>
          <div class="cell price-cell">{{item.price}}元</div>
          <div class="cell num-cell">
            <el-input-number
              size="small"
              :value="item.num"
              @change="handleChange($event,index,item.productID)"
              :min="1"
              :max="item.maxNum"
            ></el-input-number>
          </div>
          <div class="cell total-cell">{{item.price*item.num}}元</div>
          <div class="cell action-cell">
            <el-popover placement="right">
              <div class="delete-confirm">
                <p>确定删除此商品吗？</p>
                <div class="confirm-buttons">
                  <el-button size="mini" @click.stop>取消</el-button>
                  <el-button type="primary" size="mini" @click="deleteItem($event,item.id,item.productID)">确定</el-button>
                </div>
              </div>
              <i class="el-icon-delete" slot="reference"></i>
            </el-popover>
          </div>
        </div>
        <!-- 购物车商品列表END -->
      </div>
      <!-- 购物车表格END -->

      <!-- 购物车底部结算栏 -->
      <div class="cart-footer">
        <div class="footer-left">
          <router-link to="/goods" class="continue-shopping">
            <i class="el-icon-arrow-left"></i>继续购物
          </router-link>
          <span class="item-count">
            共<span class="highlight">{{getNum}}</span>件商品，已选择<span class="highlight">{{getCheckNum}}</span>件
          </span>
        </div>
        <div class="footer-right">
          <div class="total-price">
            合计：<span class="price">{{getTotalPrice}}元</span>
          </div>
          <router-link :to="getCheckNum > 0 ? '/confirmOrder' : ''">
            <button :class="['checkout-btn', {'disabled': getCheckNum === 0}]">
              去结算
            </button>
          </router-link>
        </div>
      </div>
      <!-- 购物车底部结算栏END -->
    </div>
    <!-- 购物车主要内容区END -->

    <!-- 空购物车状态 -->
    <div v-else class="empty-cart">
      <div class="empty-content">
        <div class="empty-icon">
          <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 24 24" fill="none" stroke="#ff6700" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
            <circle cx="10" cy="20.5" r="1"></circle>
            <circle cx="18" cy="20.5" r="1"></circle>
            <path d="M2.5 2.5h3l2.7 12.4a2 2 0 0 0 2 1.6h7.7a2 2 0 0 0 2-1.6l1.6-8.4H7.1"></path>
          </svg>
        </div>
        <h2>您的购物车空空如也</h2>
        <p>快去挑选心仪的商品吧</p>
        <router-link to="/goods" class="shopping-btn">
          去购物
        </router-link>
      </div>
    </div>
    <!-- 空购物车状态END -->
  </div>
</template>

<script>
import { mapActions } from "vuex";
import { mapGetters } from "vuex";

export default {
  data() {
    return {};
  },
  methods: {
    ...mapActions(["updateShoppingCart", "deleteShoppingCart", "checkAll"]),
    handleChange(currentValue, key, productID) {
      this.updateShoppingCart({ key: key, prop: "check", val: true });
      this.$axios
        .post("/api/user/shoppingCart/updateShoppingCart", {
          user_id: this.$store.getters.getUser.user_id,
          product_id: productID,
          num: currentValue
        })
        .then(res => {
          switch (res.data.code) {
            case "001":
              this.updateShoppingCart({
                key: key,
                prop: "num",
                val: currentValue
              });
              this.notifySucceed(res.data.msg);
              break;
            default:
              this.notifyError(res.data.msg);
          }
        })
        .catch(err => {
          return Promise.reject(err);
        });
    },
    checkChange(val, key) {
      this.updateShoppingCart({ key: key, prop: "check", val: val });
    },
    deleteItem(e, id, productID) {
      this.$axios
        .post("/api/user/shoppingCart/deleteShoppingCart", {
          user_id: this.$store.getters.getUser.user_id,
          product_id: productID
        })
        .then(res => {
          switch (res.data.code) {
            case "001":
              this.deleteShoppingCart(id);
              this.notifySucceed(res.data.msg);
              break;
            default:
              this.notifyError(res.data.msg);
          }
        })
        .catch(err => {
          return Promise.reject(err);
        });
    }
  },
  computed: {
    ...mapGetters([
      "getShoppingCart",
      "getCheckNum",
      "getTotalPrice",
      "getNum"
    ]),
    isAllCheck: {
      get() {
        return this.$store.getters.getIsAllCheck;
      },
      set(val) {
        this.checkAll(val);
      }
    }
  }
};
</script>

<style>
.shopping-cart {
  background-color: #f8f8f8;
  min-height: 100vh;
  padding-bottom: 50px;
}

/* 头部样式 */
.cart-header {
  background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%);
  padding: 30px 0;
  margin-bottom: 30px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.header-content {
  width: 1200px;
  margin: 0 auto;
  color: white;
}

.title-container {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.title-container i {
  font-size: 36px;
  margin-right: 15px;
}

.title-container h1 {
  font-size: 28px;
  font-weight: 600;
  margin: 0;
}

.header-tip {
  margin: 0;
  font-size: 14px;
  opacity: 0.9;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}

/* 购物车内容区域 */
.cart-content {
  width: 1200px;
  margin: 0 auto;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

/* 表格样式 */
.cart-table {
  padding: 0 20px;
}

.table-header {
  display: flex;
  align-items: center;
  height: 60px;
  border-bottom: 1px solid #f0f0f0;
  font-weight: 500;
  color: #666;
}

.product-item {
  display: flex;
  align-items: center;
  padding: 20px 0;
  border-bottom: 1px solid #f5f5f5;
  transition: all 0.3s ease;
}

.product-item:hover {
  background-color: #fafafa;
}

/* 单元格通用样式 */
.cell {
  padding: 0 10px;
}

.check-cell {
  width: 80px;
  text-align: center;
}

.img-cell {
  width: 120px;
}

.img-cell img {
  width: 80px;
  height: 80px;
  border-radius: 4px;
  object-fit: cover;
}

.name-cell {
  width: 350px;
}

.name-cell a {
  color: #333;
  transition: color 0.2s;
}

.name-cell a:hover {
  color: #ff6700;
}

.price-cell {
  width: 120px;
  text-align: center;
  color: #666;
}

.num-cell {
  width: 150px;
  text-align: center;
}

.total-cell {
  width: 120px;
  text-align: right;
  color: #ff6700;
  font-weight: 500;
}

.action-cell {
  width: 80px;
  text-align: center;
}

.action-cell i {
  font-size: 18px;
  color: #999;
  cursor: pointer;
  transition: color 0.2s;
}

.action-cell i:hover {
  color: #ff6700;
}

/* 删除确认弹窗样式 */
.delete-confirm {
  padding: 10px;
}

.delete-confirm p {
  margin: 0 0 15px;
  color: #333;
}

.confirm-buttons {
  display: flex;
  justify-content: flex-end;
}

/* 底部结算栏样式 */
.cart-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 80px;
  padding: 0 30px;
  background: white;
  border-top: 1px solid #f0f0f0;
}

.footer-left {
  display: flex;
  align-items: center;
}

.continue-shopping {
  display: flex;
  align-items: center;
  color: #666;
  transition: color 0.2s;
}

.continue-shopping:hover {
  color: #ff6700;
}

.continue-shopping i {
  margin-right: 5px;
}

.item-count {
  margin-left: 20px;
  color: #666;
}

.highlight {
  color: #ff6700;
  font-weight: 500;
  margin: 0 3px;
}

.footer-right {
  display: flex;
  align-items: center;
}

.total-price {
  margin-right: 30px;
  color: #666;
}

.price {
  color: #ff6700;
  font-size: 24px;
  font-weight: 500;
}

.checkout-btn {
  width: 180px;
  height: 50px;
  border: none;
  border-radius: 25px;
  background: linear-gradient(to right, #ff6700, #ff9a44);
  color: white;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s;
  box-shadow: 0 4px 15px rgba(255, 103, 0, 0.3);
}

.checkout-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 103, 0, 0.4);
}

.checkout-btn.disabled {
  background: #e0e0e0;
  color: #b0b0b0;
  cursor: not-allowed;
  box-shadow: none;
}

.checkout-btn.disabled:hover {
  transform: none;
  box-shadow: none;
}

/* 空购物车状态样式 */
.empty-cart {
  width: 1200px;
  margin: 0 auto;
  background: white;
  border-radius: 8px;
  padding: 60px 0;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  text-align: center;
}

.empty-content {
  max-width: 500px;
  margin: 0 auto;
}

.empty-icon {
  margin-bottom: 25px;
}

.empty-icon svg {
  opacity: 0.8;
}

.empty-cart h2 {
  font-size: 24px;
  color: #333;
  margin-bottom: 15px;
  font-weight: 500;
}

.empty-cart p {
  color: #999;
  margin-bottom: 30px;
}

.shopping-btn {
  display: inline-block;
  padding: 12px 40px;
  background: linear-gradient(to right, #ff6700, #ff9a44);
  color: white;
  border-radius: 25px;
  text-decoration: none;
  font-weight: 500;
  transition: all 0.3s;
  box-shadow: 0 4px 15px rgba(255, 103, 0, 0.3);
}

.shopping-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 103, 0, 0.4);
}
</style>